<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式-对象</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .红色 {
            color: red;
        }

        .加粗 {
            font-weight: bold;
        }

        .活动 {
            background-color: lightgreen;
        }

        .非活动 {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div id="应用"></div>
</body>
<script>
    const { createApp: 创建, ref: 响应 } = Vue

    const 根组件 = {
        template: /*html*/`
            <div :class="{'红色': 是否红色, '加粗': 是否加粗}">类型+对象</div>
            <div :class="[颜色类, '加粗']">类型+列表</div>
            <div :style="{color: 文本颜色, fontSize: 字体尺寸 + 'px'}">样式+对象</div>
            <div :style="[样式对象1, 样式对象2]">样式+列表</div>
            <div :class="活动状态 ? '活动' : '非活动'" :style="{color: 活动状态 ? 'red' : 'blue'}">动态绑定</div>
        `,
        setup() {
            const 是否红色 = 响应(true)
            const 是否加粗 = 响应(false)
            const 颜色类 = 响应('红色')
            const 文本颜色 = 响应('red')
            const 字体尺寸 = 响应(26)
            const 样式对象1 = 响应({
                color: 'green'
            })
            const 样式对象2 = 响应({
                fontSize: '18px'
            })
            const 活动状态 = 响应(true)

            return { 是否红色, 是否加粗, 颜色类, 文本颜色, 字体尺寸, 样式对象1, 样式对象2, 活动状态}
        }
    }

    const 应用 = 创建(根组件)
    应用.mount('#应用')
</script>

</html>